<script setup lang="ts">
import { AddCircle } from '@vicons/ionicons5'
import type { Key } from '@zyh-ui/components/tree'
import { ref } from 'vue'

function createData(level = 4, parentKey = ''): any {
  if (!level) return []
  const arr = new Array(20 - level).fill(0)
  return arr.map((_, index) => {
    const key = parentKey + level + index
    return {
      key,
      label: createLabel(level),
      children: createData(level - 1, key),
    }
  })
}

function createLabel(level: number) {
  if (level === 1) {
    return 'one'
  }
  if (level === 2) {
    return 'two'
  }
  if (level === 3) {
    return 'three'
  }
  if (level === 4) {
    return 'universe'
  }
  return 'other'
}

// function createData() {
//   return [
//     {
//       label: nextLabel(),
//       key: 1,
//       isLeaf: false, // 表示点击的时候动态加载
//     },
//     {
//       label: nextLabel(),
//       key: 2,
//       isLeaf: false,
//       disabled: true,
//     },
//   ]
// }

// function nextLabel(currentLabel?: string | number) {
//   if (!currentLabel) {
//     return 'one'
//   }
//   if (currentLabel === 'one') {
//     return 'two'
//   }
//   if (currentLabel === 'two') {
//     return 'three'
//   }
//   if (currentLabel === 'three') {
//     return 'universe'
//   }
//   if (currentLabel === 'universe') {
//     return 'one'
//   }
//   return 'other'
// }

// function handleLoad(node: TreeOption) {
//   return new Promise<TreeOption[]>((resolve) => {
//     setTimeout(() => {
//       resolve([
//         // 这个数据会作为children属性
//         {
//           label: nextLabel(node.label as string),
//           key: node.key + nextLabel(node.label as string),
//           isLeaf: false,
//         },
//       ])
//     }, 1000)
//   })
// }

const data = ref(createData())

const value = ref<Array<Key>>([40, 41])

const check = ref(true)
</script>

<template>
  <z-icon size="100" color="red">
    <AddCircle />
    <AddCircle />
  </z-icon>

  <z-icon size="100" color="yellow">
    <AddCircle />
    <AddCircle />
  </z-icon>

  <!-- 在使用树组件的时候会传递一个 🌲形的结构 -->
  <z-tree
    :data="data"
    label-filed="label"
    key-filed="key"
    children-filed="children"
    :default-checked-keys="['40', '4031']"
    v-model:selected-keys="value"
    selectable
    :showCheckbox="true"
    :default-checkbox-keys="[40, 41]"
    :multiple="false"
  >
    <template #default="node">
      <span>{{ node.label + node.key }}</span>
    </template>
  </z-tree>

  <z-checkbox v-model="check" label="one" />
</template>

<style scoped></style>
